<script setup>
import { computed, ref, onBeforeMount, watch } from "vue";
import nodeMixin from "../NodeMixin.js";
import { listByParentArr } from '../../../../../../../../api/login'
import {fieldList} from '../../../../../../../../api/system/flowPath'
const props = defineProps({
  ...nodeMixin.props,
  processData: {
    type: Array,
    default: () => {
      return []
    }
  },
  nodeConfVisible: {
    type: Boolean,
    default: true
  }
})
const ruleOne = ref([])
const field = ref([])
const list = ref([])
const ruleTwo = ref([])
const ruleTree = ref([])
const form=ref()
const options = ref({
  nodeCategory: [//节点分类
    {
      label: '保前',
      value: '1',
    },
    {
      label: '保后',
      value: '2',
    },
  ],
  ruleOne: [],
  ruleTwo: [],
  ruleTree: [],
})
const fields = ref([
  {
    label: "节点名称",
    prop: 'name',
    placeholder: '请输入',
    type: 'input',

  },
  {
    label: "",
    prop: 'expressions',
  },
  {
    label: "节点分类",
    prop: 'nodeCategory',
    placeholder: '请输入',
    type: 'radio',

  },
])
const rules = ref({
  name: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
  ],
  nodeCategory: [
    { required: true, message: '请选择节点分类', trigger: 'change' },
  ],
  nodeCategory: [
    { required: true, message: '请选择节点分类', trigger: 'change' },
  ],
})

function getData() {
  listByParentArr({ ids: ['NODE_TRIGGER_1', 'NODE_TRIGGER_2', 'NODE_TRIGGER_3'] }).then(res => {
    ruleOne.value = res.NODE_TRIGGER_1
    ruleTwo.value = res.NODE_TRIGGER_2
    ruleTree.value = res.NODE_TRIGGER_3
  })
  fieldList().then(res=>{
    field.value=res
  })

}
onBeforeMount(() => {
  getData()

})
function command(e) {
  _value.value.props.expressions.push({
    type: e,
    enable: '1',
    k: '',
    v: '',
  })
}
function reduce(index) {
  _value.value.props.expressions.splice(index, 1)
}
const emit = defineEmits(nodeMixin.emits)
const _value = computed(nodeMixin.computed._value(props, emit))
function handleSelect(prop) {

}
function save(){
  form.value.verification().then(res=>{
    emit('close')
  })
}
watch(() => props.nodeConfVisible, (newValue, oldValue) => {
  // 当isActive变化时，更新localIsActive的值
  if (newValue) {
    getData()
  } else {
  }
});

</script>

<template>
  <div class="condition">
    <div class="form_drawer">
      <myform :fields="fields" ref="form" @handleSelect="handleSelect" :model="_value.props" :rules="rules" labelPosition="top"
        :inline="false" :options="options">
        <template v-slot:expressions>
          <div class="d_f j_c_s_b w_100">
            <div class="label">触发条件</div>
            <el-dropdown @command="command">
              <span class="el-dropdown-link">
                <img src="../../../../../../../../assets/add.png" alt="" class="add" @click="open">
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="1">条件一</el-dropdown-item>
                  <el-dropdown-item :command="2">条件二</el-dropdown-item>
                  <el-dropdown-item :command="3">条件三</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-for="(item, index) in _value.props.expressions" :key="index" class="w_100 m_t_10">
            <div class="box" v-if="item.type == 1">
              <div class="d_f j_c_s_b">
                <div class="label">触发条件{{ index + 1 }}</div>
                <el-switch inactive-value="0" active-value="1" v-model="item.enable"
                  style="--el-switch-on-color: #13ce66;" />
              </div>
              <div class="d_f m_t_10 j_c_s_b">
                <el-select v-model="item.k" placeholder="请选择" clearable>
                  <el-option v-for="item in ruleOne" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
                <el-input v-model="item.v" type="number" placeholder="请输入" clearable>
                  <template #suffix>
                    <span class="suffix">
                      <span class="unit">元</span>
                    </span>
                  </template>
                </el-input>
              </div>
              <div class="d_f m_t_10 j_c_s_b">
                <el-select v-model="item.v1" placeholder="请选择字段名" clearable>
                  <el-option v-for="item in field" :key="item.value" :label="item.name" :value="item.bindName" />
                </el-select>
              </div>
              <div class="d_f j_c_s_b m_t_10">
                <div></div>
                <img src="../../../../../../../../assets/reduce.png" alt="" class="add" @click="reduce(index)">
              </div>
              <!-- <div class="d_f m_t_10 j_c_s_b">
              <el-select v-model="_value.props.expression.conditionOne.ruleTwo" placeholder="请选择" clearable>
                <el-option v-for="item in ruleOne" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-input v-model="_value.props.expression.conditionOne.numTwo" type="number" placeholder="请输入" clearable>
                <template #suffix>
                  <span class="suffix">
                    <span class="unit">万元</span>
                  </span>
                </template>
              </el-input>
            </div> -->
            </div>
            <div class="box m_t_10" v-if="item.type == 2">
              <div class="d_f j_c_s_b">
                <div class="label">触发条件{{ index + 1 }}</div>
                <el-switch inactive-value="0" active-value="1" v-model="item.enable"
                  style="--el-switch-on-color: #13ce66;" />
              </div>
              <div class="d_f m_t_10 j_c_s_b">
                <el-select v-model="item.k" placeholder="请选择" clearable>
                  <el-option v-for="item in ruleTwo" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
                <el-input v-model="item.v" type="number" placeholder="请输入" clearable>
                  <template #suffix>
                    <span class="suffix">
                      <span class="unit">天</span>
                    </span>
                  </template>
                </el-input>
              </div>
              <div class="d_f j_c_s_b m_t_10">
                <div></div>
                <img src="../../../../../../../../assets/reduce.png" alt="" class="add" @click="reduce(index)">
              </div>
            </div>
            <div class="box m_t_10" v-if="item.type == 3">
              <div class="d_f j_c_s_b">
                <div class="label">触发条件{{ index + 1 }}</div>
                <el-switch inactive-value="0" active-value="1" v-model="item.enable"
                  style="--el-switch-on-color: #13ce66;" />
              </div>
              <div class="d_f m_t_10 j_c_s_b">
                <el-select v-model="item.k" placeholder="请选择" clearable>
                  <el-option v-for="item in ruleTree" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
                <el-radio-group v-model="item.v">
                  <el-radio :value="true">是</el-radio>
                  <el-radio :value="false">否</el-radio>
                </el-radio-group>
              </div>
              <div class="d_f j_c_s_b m_t_10">
                <div></div>
                <img src="../../../../../../../../assets/reduce.png" alt="" class="add" @click="reduce(index)">
              </div>
            </div>
          </div>

        </template>
      </myform>
    </div>
    <div class="d_f j_c_c">
        <el-button type="primary" @click="save" >保 存</el-button>
     </div>
  </div>
</template>

<style lang="scss">
.condition {
  height: 100%;
  .el-input,
  .el-select {
    width: 100% !important;
  }

  .box {
    background: rgba(24, 120, 255, 0.02);
    width: calc(100% - 20px);
    padding: 10px;

    .label::before {
      color: #f56c6c;
      content: "*";
      margin-right: 4px;
    }

    .el-input,
    .el-select {
      width: 45% !important;
      height: 32px !important;
    }
  }

  .add {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .form_drawer{
    height: calc(100% - 70px);
    overflow-y: auto;
  }
}
</style>
